<template>
	<div class="wSetting">
	<div class="box">
		<el-form ref="form" :model="form" label-width="120px">
			<el-form-item label="预警开关:">
				<div class="range" :class="{active:enable == 1}" @click="enable = 1">开启</div>
				<div class="range" :class="{active:enable == 0}" @click="enable = 0">关闭</div>
			</el-form-item>
			<el-form-item label="弹窗预警:">
				<div class="range" :class="{active:Popupswarning == 1}" @click="Popupswarning = 1">开启</div>
				<div class="range" :class="{active:Popupswarning == 0}" @click="Popupswarning = 0">关闭</div>
			</el-form-item>
			<el-form-item label="监测范围:">
				<div class="range" :class="{active:active == 0}" @click="active = 0">全国</div>
				<div class="range" :class="{active:active == 1}" @click="active = 1">本地</div>
			</el-form-item>
			<el-form-item label="预警等级:">
				<div class="range" :class="{active:warningrate == 1}" @click="warningrate = 1">一般</div>
				<div class="range" :class="{active:warningrate == 2}" @click="warningrate = 2">重大</div>
				<div class="range" :class="{active:warningrate == 3}" @click="warningrate = 3">危机</div>
			</el-form-item>
			<el-form-item label="邮箱报警:" 
				prop="alertEmail"
				:rules="[
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
				]"
			>
			  <el-input v-model="form.alertEmail" placeholder="请输入报警邮箱"></el-input>
			</el-form-item>
		    <el-form-item label="预警时间:"
					prop="startTime"

					:rules= "{ required: true, message: '请选择时间', trigger: 'blur' }">
		        <el-time-select
		        class="time"
			    placeholder="起始时间"
			    v-model="form.startTime"
			    :picker-options="{
			      start: '08:00',
			      step: '00:15',
			      end: '17:45'
			    }">
			  </el-time-select>
			  <el-time-select
			  	class="time"
			    placeholder="结束时间"
			    v-model="form.endTime"
			    :picker-options="{
			      start: '08:15',
			      step: '00:15',
			      end: '18:00',
			      minTime: form.startTime
			    }">
			  </el-time-select>
		    </el-form-item>
		  <el-form-item label="地名关键词:"
				prop="distKeyword"
				:rules= "{ required: true, message: '请输入地名', trigger: 'blur' }">
			  <el-input v-model="form.distKeyword" placeholder="请输入地名关键词"></el-input>
			</el-form-item>
			<el-form-item label="人名关键词:">
			  <el-input v-model="form.nameKeyword" placeholder="请输入人名关键词"></el-input>
			</el-form-item>
			<el-form-item label="事件关键词:">
			  <el-input v-model="form.eventKeyword" placeholder="请输入事件关键词"></el-input>
			</el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="setform('form')">保存</el-button>
		    <el-button @click="goback()">取消</el-button>
		  </el-form-item>
		</el-form>
		</div>

	</div>
</template>
<script >
	export default {
		name:'wSetting',
		data(){
			return{
				ByOrgCode:{},
				active:0,
				enable:1,
				Popupswarning:1,
				warningrate:1,
				form:{
					id:'',
					enable:1, 
					monitorScope:'0',
					alertEmail:'',
					startTime:'',
					endTime:'',
					distKeyword:'',
					nameKeyword:'',
					eventKeyword:'',
				}
			}
		},
		mounted(){
			this.getMessage()
		},
		methods:{
			fomartEmail(val){
				let out = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(val)
				if(!out){
					this.$confirm('邮箱格式不正确', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then().catch();;
				}
				return out
			},
			// 匹配中文
			fomartL(val){
				let out =  /[\u4e00-\u9fa5]/.test(val)
				if(!out){
					this.$confirm('地名必须为中文', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then().catch();
				}
				return out
			},
			getMessage(){
				this.$http.get('vrv-monitor-platform-web/alert/set/queryByOrgCode').then((res)=>{
					if(res.body.success==true){
						this.ByOrgCode = res.body.data
						this.form.id=this.ByOrgCode.id
						this.active = this.ByOrgCode.monitorScope
						this.form.alertEmail = this.ByOrgCode.alertEmail
						this.form.distKeyword = this.ByOrgCode.distKeyword
						this.form.nameKeyword = this.ByOrgCode.nameKeyword
						this.form.eventKeyword = this.ByOrgCode.eventKeyword
						this.form.startTime = this.ByOrgCode.monitorStartTime
						this.form.endTime = this.ByOrgCode.monitorEndTime
						this.enable = this.ByOrgCode.enable
						this.Popupswarning = parseInt(this.ByOrgCode.alertSwitch)
						this.warningrate = parseInt(this.ByOrgCode.level)
					}
				})
			},
			setform(form){
				if(!this.fomartEmail(this.form.alertEmail)) return
				if(!this.fomartL(this.form.distKeyword)) return
				if(!this.form.startTime&&!this.form.endTime){
					this.$confirm('时间不能为空', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then().catch();;
					return 
				}
				this.$http.post('vrv-monitor-platform-web/alert/set/update',{
					id:this.form.id,
					alertEmail:this.form.alertEmail,
					distKeyword:this.form.distKeyword,
					nameKeyword:this.form.nameKeyword,
					eventKeyword:this.form.eventKeyword,
					monitorScope:this.active,
					monitorStartTime:this.form.startTime,
					monitorEndTime:this.form.endTime,
					enable:this.enable,
					alertSwitch:this.Popupswarning,
					level:this.warningrate
				}).then((res)=>{
					if(res.body.success==true){
						this.$router.push('/personal/warningsetting');
						// this.getMessage()
					}else{
						this.$message.error(res.body.message)
					}
				})
			},
			goback(){
				this.$router.push('/personal/warningsetting');
			}
		}
	}
</script>

<style scoped>
	.box{
		width: 33rem;
		margin: 0 auto;
		margin-top: 3rem;
	}
	.box button{
		width: 6.25rem;
	}
	.range{
		width: 5rem;
		height: 2.1rem;
		display: inline-block;
		text-align: center;
		border-radius: 4px;
		cursor: pointer;
		line-height: 2.1rem;
		font-size: 0.88rem;
		color: #000;
	}
	.range:first-child{
		margin-right: 1rem;
	}
	.range.active{
		background: #e85a47;
		color: #fff;
	}
	.time{
		width: 49%!important;
	}
</style>